<article class="message" ng-class="getClassNames(message, marked)">

    <div class="summary" data-toggle-message>

        <div class="summary-left">
            <div class="meta">

                <i class="history fa fa-reply" data-if-is="replied"></i>
                <i class="history fa fa-reply-all" data-if-is="repliedall"></i>
                <i class="history fa fa-mail-forward" data-if-is="forwarded"></i>

                <div class="contact message-contact">

                    <div class="from message-contact-from">
                        <span translate translate-context="Message sender label" translate>From</span>:
                    </div>

                    <div
                        class="from-value"
                        pt-tooltip="{{ message.Sender | contact:'Name' }} {{ message.Sender | contact:'Address' }}">
                        <strong>{{ message.Sender | contact:'Name' }}</strong>
                        <em>{{ message.Sender | contact:'Address' }}</em>
                    </div>

                    <message-address-actions
                        data-message-id="message.ID"
                        data-email="message.Sender"
                        ng-if="message.expand"></message-address-actions>
                    <encryption-status class="encryptionStatus"></encryption-status>

                    <message-address-action-menu></message-address-action-menu>
                </div>


            </div>
            <div class="location message-summary-folder sent">
                <i ng-if="message.isDraft()" class="pm_tag allMessageLabels-type-draft" translate-context="Message label" translate>Draft</i>
                <i ng-if="message.isSent()" class="pm_tag allMessageLabels-type-sent" translate-context="Message label" translate>Sent</i>
            </div>

        </div>

        <div class="summary-right">
            <div class="labels message-summary-labels">
                <labels-element
                    data-button="remove"
                    data-element="message"
                    class="message-summary-labels-list"></labels-element>
            </div>
            <div class="location message-summary-folder folders">
                <folders-message></folders-message>
            </div>
            <div class="time">
                <i class="fa fa-paperclip" ng-show="message.NumAttachments > 0"></i>
                <time class="time-readable">{{ message.Time | localReadableTime }}</time>
                <time
                    class="time-machine"
                    time-refreshed="{{ message.Time }}"
                    time-filter="messageTime"
                    time-interval="30000"></time>
            </div>
            <div class="status">
                <pt-star
                    data-model="message"
                    class="singleStar"
                    data-pt-star-type="message"></pt-star>
            </div>
        </div>
    </div>

    <div ng-if="message.expand">

        <div class="details">
            <div class="recipients-summary">
                <strong translate-context="Message recipient label" translate>To</strong>:
                <span
                    class="recipients-summary-label"
                    ng-repeat="email in recipients() track by $id(email)"
                    title="{{ ::email | contact:'Address' }}">{{::email | contact: 'Name': true | nameRecipient}}</span>
                <span
                    ng-if="::noRecipients()"
                    class="recipients-summary-label"
                    translate-context="No recipients to display in the message header"
                    translate>Undisclosed Recipients</span>
            </div>

            <div class="recipients-details">
                <message-contacts
                    class="recipients-details-toGroup"
                    ng-if="message.ToList.length"
                    data-model="toList"
                    data-list="To"
                    data-message-id="message.ID"
                ></message-contacts>

                <message-contacts
                    class="recipients-details-ccGroup"
                    ng-if="message.CCList.length"
                    data-model="ccList"
                    data-list="CC"
                    data-message-id="message.ID"
                    ></message-contacts>

                <message-contacts
                    class="recipients-details-bccGroup"
                    ng-if="message.BCCList.length"
                    data-model="bccList"
                    data-list="BCC"
                    data-message-id="message.ID"
                ></message-contacts>
                <div class="recipients-details-size"><span translate-context="Label for the message size when displaying email details" translate>Size:</span> {{ ::message.Size | bytes }}</div>
                <div class="encrypted-subject" ng-if="message.encryptedSubject">
                    <i class="fa fa-lock encrypted-subject-icon" pt-tooltip-translate="Subject is end-to-end encrypted" pt-tooltip-translate-context="Tooltip"></i>
                    <span
                        translate
                        translate-context="Title"
                        class="header-name">Subject</span>
                    <span> {{ ::message.encryptedSubject }}</span>
                </div>
            </div>

            <all-message-labels ng-if="message.toggleDetails"></all-message-labels>

            <div class="action-row">

                <div class="actions pull-right" ng-if="message.decrypting === false">
                    <div class="pm_buttons">
                        <filter-button data-message="message"></filter-button>
                        <div class="pm_buttons">
                            <a role="button" class="pm_trigger open-folder pull-left" pt-tooltip-translate="Move to" pt-tooltip-translate-context="Action" pt-tooltip-translate-comment="Tooltip" dropdown data-dropdown-no-auto-close="true" tabindex="0">
                                <small><i class="fa fa-folder"></i> <i class="fa fa-angle-down"></i></small>
                                <span class="sr-only" translate-context="Action" translate>Move to</span>
                            </a>
                            <div class="pm_dropdown right wide pull-left">
                                <dropdown-folders data-elements="getElements"></dropdown-folders>
                            </div>
                        </div>
                        <div class="pm_buttons">
                            <a role="button" class="pm_trigger open-label pull-left" pt-tooltip-translate="Label as" pt-tooltip-translate-context="Action" pt-tooltip-translate-comment="Tooltip" dropdown data-dropdown-no-auto-close="true" tabindex="0">
                                <small><i class="fa fa-tag"></i> <i class="fa fa-angle-down"></i></small>
                                <span class="sr-only" translate-context="Action" translate>Label as</span>
                            </a>
                            <div class="pm_dropdown right wide pull-left">
                                <dropdown-labels data-messages="getMessage" data-message="message" data-save="saveLabels"></dropdown-labels>
                            </div>
                        </div>
                    </div>
                    <nav class="pm_buttons">
                        <a
                            class="dropdown-actions-nowrap-reply"
                            data-action-compose="::message"
                            data-action-compose-type="reply"
                            pt-tooltip-translate="Reply"
                            pt-tooltip-translate-context="Action"
                            tabindex="0"
                            role="button">

                            <i class="fa fa-mail-reply"></i>
                            <span class="sr-only" translate-context="Action" translate>Reply</span>
                        </a>
                        <a
                            class="dropdown-actions-nowrap-replyall"
                            data-action-compose="::message"
                            data-action-compose-type="replyall"
                            pt-tooltip-translate="Reply all"
                            pt-tooltip-translate-context="Action"
                            tabindex="0"
                            role="button">
                            <i class="fa fa-mail-reply-all"></i>
                            <span class="sr-only" translate-context="Action" translate>Reply all</span>
                        </a>

                        <a
                            class="dropdown-actions-nowrap-forward"
                            data-action-compose="::message"
                            data-action-compose-type="forward"
                            pt-tooltip-translate="Forward"
                            pt-tooltip-translate-context="Action"
                            tabindex="0"
                            role="button">
                            <i class="fa fa-mail-forward"></i>
                            <span class="sr-only" translate-context="Action" translate>Forward</span>
                        </a>
                        <a role="button" href="#" class="pm_trigger dropdown-actions-nowrap-more" dropdown pt-tooltip-translate="More" pt-tooltip-translate-context="Action">
                            <i class="fa fa-angle-down"></i>
                            <span class="sr-only" translate-context="Action" translate>More</span>
                        </a>
                        <div class="pm_dropdown wide dropdown-actions-nowrap right">
                            <button
                                class="dropdown-actions-nowrap-button"
                                data-action-message="move"
                                data-action-message-type="inbox">
                                <i class="fa fa-inbox dropdown-actions-nowrap-icon"></i>
                                <span class="dropdown-actions-nowrap-textContainer" translate translate-context="Action">Move to inbox</span>
                            </button>
                            <button
                                class="dropdown-actions-nowrap-button"
                                data-action-message="move"
                                data-action-message-type="trash">
                                <i class="fa fa-trash-o dropdown-actions-nowrap-icon"></i>
                                <span class="dropdown-actions-nowrap-textContainer" translate translate-context="Action">Move to trash</span>
                            </button>
                            <button
                                class="dropdown-actions-nowrap-button"
                                data-action-message="unread">
                                <i class="fa fa-eye-slash dropdown-actions-nowrap-icon"></i>
                                <span class="dropdown-actions-nowrap-textContainer" translate translate-context="Action">Mark as unread</span>
                            </button>
                            <button
                                class="dropdown-actions-nowrap-button"
                                data-action-message="move"
                                data-action-message-type="spam"
                                ng-hide="'secured.spam.**' | includedByState">
                                <i class="fa fa-ban dropdown-actions-nowrap-icon"></i>
                                <span class="dropdown-actions-nowrap-textContainer" translate translate-context="Action">Mark as spam</span>
                            </button>
                            <phishing-btn ng-if="!message.failedDecryption"></phishing-btn>
                            <button
                                class="dropdown-actions-nowrap-button"
                                data-action-message="delete"
                                ng-if="'secured.trash.**' | includedByState">
                                <i class="fa fa-times dropdown-actions-nowrap-icon"></i>
                                <span class="dropdown-actions-nowrap-textContainer" translate translate-context="Action">Delete</span>
                            </button>
                            <button class="dropdown-actions-nowrap-button" data-action-message="togglePlainHtml"
                            data-message-mode="{{ message.viewMode }}">
                                <span class="dropdown-actions-nowrap-button" data-if-message-mode="html">
                                    <i class="fa fa-file-text-o dropdown-actions-nowrap-icon"></i>
                                    <span class="dropdown-actions-nowrap-textContainer" translate translate-context="Action">View source code</span>
                                </span>
                                <span class="dropdown-actions-nowrap-button" data-if-message-mode="plain">
                                    <i class="fa fa-file-photo-o dropdown-actions-nowrap-icon"></i>
                                    <span class="dropdown-actions-nowrap-textContainer" translate translate-context="Action">View rendered HTML</span>
                                </span>
                            </button>
                            <button class="dropdown-actions-nowrap-button" data-action-message="viewPgp">
                                <i class="fa fa-code dropdown-actions-nowrap-icon"></i>
                                <span class="dropdown-actions-nowrap-textContainer" translate translate-context="Action">View headers</span>
                            </button>
                            <button class="dropdown-actions-nowrap-button" data-action-message="downloadEml" ng-if="!message.failedDecryption">
                                <i class="fa fa-download dropdown-actions-nowrap-icon"></i>
                                <span class="dropdown-actions-nowrap-textContainer" translate-context="Action" translate>Export</span>
                            </button>
                            <button class="dropdown-actions-nowrap-button" data-action-message="print">
                                <i class="fa fa-print dropdown-actions-nowrap-icon"></i>
                                <span class="dropdown-actions-nowrap-textContainer" translate translate-context="Action">Print</span>
                            </button>
                        </div>
                    </nav>
                </div>

                <button class="toggleDetails" data-action-message="toggleDetails">
                    <span class="toggleDetails-label-show" translate translate-context="Action">Show details</span>
                    <span class="toggleDetails-label-hide" translate translate-context="Action">Hide details</span>
                </button>

            </div>

            <message-extra></message-extra>
        </div>

        <events-attachments data-model="message"></events-attachments>

        <div class="frame message-frame" data-embedded-img-loader data-inject-message-media>
            <loader-tag ng-if="message.decrypting === true"></loader-tag>
            <div
                class="bodyDecrypted email message-body-container"
                ng-class="{'plain': message.isPlain}"
                render-message-body
                ng-if="message.viewMode === 'html' && !message.failedDecryption"
                toggle-blockquote
                scroll="true"></div>

            <pre
                class="email message-body-container"
                ng-if="message.viewMode === 'plain' || message.failedDecryption">{{message.plainText()}}</pre>
        </div>

        <list-attachments ng-if="message.Attachments.length" data-model="message"></list-attachments>
    </div>
    <div class="clear"></div>

</article>
